<template>
  <el-form ref="ruleForm"
           :model="form"
           label-width="110px"
           label-position="right"
           size="small"
           :rules="rules">
    <ModelsSelect ref="modelsSelector"
                  :record="record"
                  @confirm="carTypeModel" />
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="整车数量"
                      prop="vehicleQuantity"
                      :rules="[
                {
                  required: true,
                  message: `请选择正确的整车数量`,
                  validator: validateVehicleQuantity,
                  trigger: 'change'
                }
              ]">
          <el-select v-model="form.vehicleQuantity"
                     readonly
                     @change="handleChangeVehicleCount">
            <el-option v-for="i in 10"
                       :key="i"
                       :value="i">{{ i }}车</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="货物分类"
                      prop="cargoType"
                      :rules="[
                {
                  required: true,
                  message: `请选择正确的货物分类`,
                  validator: validateCargoType,
                  trigger: 'change'
                }
              ]">
          <Radio v-model="form.cargoType"
                 :options="cargoTypeNameOptions"
                 @input="handleChangeCargoType" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="包装方式"
                      prop="packageMode"
                      :rules="[
                {
                  required: true,
                  message: `请选择正确的包装方式`,
                  validator: validatePackageMode,
                  trigger: 'change'
                }
              ]">
          <Radio v-model="form.packageMode"
                 :options="packageModeNameOptions"
                 @input="handleChangePackageMode" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="是否保价"
                      prop="insure">
          <span class="flex-start">
            <el-switch v-model="form.insure" />
            <div class="ml10">{{form.insure ? '保价' : '不保价'}}</div>
          </span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="运输要求">
          <span class="flex-start">
            <el-checkbox v-model="form.load"
                         :true-label="'是'"
                         :false-label="'否'">装货</el-checkbox>
            <el-checkbox v-model="form.unload"
                         :true-label="'是'"
                         :false-label="'否'">卸货</el-checkbox>
          </span>
        </el-form-item>
      </el-col>
      <el-col v-if="form.load === '是' || form.unload === '是'"
              :span="8"
              class="flex-start">
        <el-form-item label="计费模式"
                      prop="billingMode"
                      :rules="[
                {
                  required: true,
                  message: `请选择正确的计费模式`,
                  validator: validateBillingMode,
                  trigger: 'change'
                }
              ]">
          <el-select v-model="form.billingMode"
                     clearable
                     style="width: 100%;"
                     placeholder="请选择计费模式"
                     @input="changeBillingMode">
            <el-option v-for="({label, value}, index) in billingModeOptions"
                       :key="index"
                       :label="label"
                       :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0px"
                      prop="billingUnit">
          <BillingUnitSelect v-model="form.billingUnit"
                             :mode="form.billingMode"
                             :styles="'width: 70%;'" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="跟踪方式"
                      prop="trackType"
                      :rules="[
                {
                  required: false,
                  message: this.trackNoErrMessage,
                  validator: validateTrackType,
                  trigger: 'change'
                }
              ]">
          <Track :no="form.trackNo"
                 :type="form.trackType"
                 @track="changeTrack" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import BillingUnitSelect from "./BillingUnitSelect.vue";
import ModelsSelect from "./ModelsSelect.vue";
import Track from "./Track.vue";
import validateForm from "./validateForm.js";
import Radio from "@/components/advance/Radio";
import { cargoTypeNameOptions, packageModeNameOptions } from "@/libs/constant.js";
export default {
  name: "CompleteVehicle",
  mixins: [validateForm],
  components: {
    Radio, BillingUnitSelect, ModelsSelect, Track
  },
  props: {
    record: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      rules: {
        billingUnit: [{ required: true, message: "请选择计价单位", trigger: "change" }],
        cargoType: [{ required: true, message: "请选择货物分类", trigger: "change" }],
        packageMode: [{ required: true, message: "请选择包装方式", trigger: "change" }],
      },
      form: {
        vehicleQuantity: 1,
        vehicleLength: null,
        vehicleLoad: null,
        vehicleModel: null,
        vehicleVolume: null,
        billingMode: null,
        billingUnit: null,
        cargoType: null,
        packageMode: null,
        insure: null,
        pick: null,
        deliver: null,
        load: null,
        unload: null,
        trackType: null,
        trackNo: null
      },
      billingModeOptions: [
        { label: '重量', value: '重量' },
        { label: '体积', value: '体积' },
        { label: '数量', value: '数量' },
      ],
      vehicleQuantityFlag: true, // 整车数量错误
      billingModeFlag: true, // 计费模式错误
      cargoTypeFlag: true, // 货物分类错误
      packageModeFlag: true, // 包装方式错误
      bindFlag: true, // 绑定错误
      errors: [],
      cargoTypeNameOptions,
      packageModeNameOptions
    };
  },
  computed: {
    trackNoErrMessage () {
      let errMessage = null
      this.errors.map(item => {
        if (item.field === "trackNo") {
          errMessage = item.message;
        }
      })
      return errMessage
    }
  },
  watch: {},
  created () {
    this.form = {
      vehicleQuantity: this.record.vehicleQuantity,
      vehicleLength: this.record.vehicleLength,
      vehicleLoad: this.record.vehicleLoad,
      vehicleModel: this.record.vehicleModel,
      vehicleVolume: this.record.vehicleVolume,
      billingMode: this.record?.billingMode && this.record?.billingMode.split('/')[0],
      billingUnit: this.record?.billingMode && this.record?.billingMode.split('/')[1],
      cargoType: this.record.cargoType,
      packageMode: this.record.packageMode,
      insure: this.record.insure === '是' ? true : false,
      pick: this.record.pick,
      deliver: this.record.deliver,
      load: this.record.load,
      unload: this.record.unload,
      trackType: this.record.trackType,
      trackNo: this.record.trackNo
    }
    this.errors = this.record?.errors || [];
  },
  mounted () {
    this.validateForm();
  },
  methods: {
    // 校验规则
    validateForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
    },
    // 车型选择
    carTypeModel (car) {
      this.form = { ...this.form, ...car };
      console.log("============this.data", this.form)
    },
    handleChangeVehicleCount () {
      this.vehicleQuantityFlag = false;
    },
    changeTime () { },
    changeBillingMode () {
      this.billingModeFlag = false;
    },
    handleChangeCargoType () {
      this.cargoTypeFlag = false;
    },
    handleChangePackageMode () {
      this.packageModeFlag = false;
    },
    changeTrack (val, name) {
      this.form[name] = val;
      if (name === 'trackType' && val === '无') {
        this.form.trackNo = null;
      }
      this.bindFlag = false;
    },
  }
};
</script>

<style lang="scss" scoped>
.no-atTheMoment
  .el-picker-panel__footer
  .el-button--text.el-picker-panel__link-btn {
  display: none !important;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.w73p {
  width: 73% !important;
}
.ml10 {
  margin-left: 10px;
}
</style>
